<template>
  <div class="home_carousel_box">
    <Swiper :vertical="vertical" :show_indicators="show_indicators">
      <van-swipe-item>
        <div class="swipe_item_img">
          <img src="@/assets/imge/defeat_img.png" alt="3" />
        </div>
      </van-swipe-item>
      <van-swipe-item>
        <div class="swipe_item_img">
          <img src="@/assets/imge/defeat_img.png" alt="2" />
        </div>
      </van-swipe-item>

      <!-- <van-swipe-item v-for="item in carouselList" :key="item.swipe_id"
        ><a href="#"><img :src="item.swipe_image" alt="" /></a
      ></van-swipe-item> -->
    </Swiper>
  </div>
</template>

<script>
import "../../../assets/imge/defeat_img.png";
import Swiper from "../../../components/carousel/Swiper";
import { ref } from "vue";
import { getCarousel } from "../../../api/home";
export default {
  name: "HomeCarousel",
  components: { Swiper },
  setup() {
    //轮播方向及子按钮显示
    const vertical = ref(false);
    const show_indicators = ref(true);
    //数据
    const carouselList = ref([]);
    getCarousel().then((res) => {
      // console.log(res);
      //轮播状态:display 展示
      carouselList.value = res.data.filter((item) => item.status == "display");
    });
    return {
      vertical,
      show_indicators,
      carouselList,
    };
  },
};
</script>

<style scoped lang="less">
.home_carousel_box {
  width: 100%;
  height: 7rem;
  box-sizing: border-box;
  margin: 3.5rem auto 0.5rem;
}
.van-swipe-item {
  line-height: 2rem;
  text-align: center;
  padding: 0 0.5rem;
  box-sizing: border-box;
}
.swipe_item_img {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 0.5rem;
  // border: 1px solid red;
  img {
    height: 100%;
  }
}
</style>
